<!-- 多选答案 -->
<template>
	<view>
		<checkbox-group v-for="item in choices" :key="item.choiceId" @change="change(item.choiceId)">
			<label :class="[item.isChose=='0'?'unselected':'selected']">
				<view>
					<checkbox style="transform: scale(0.7)" :value="item.choiceDesc" :checked="item.isChose=='1' " />

				</view>
				<text style="margin-top: 4px;">{{item.choiceId}}、{{item.choiceDesc}}</text>
			</label>
			<auto-img v-if="item.choiceType=='2'" :src="item.contentUrl"></auto-img>
			<video v-if="item.choiceType=='3'" :src="item.contentUrl"></video>
			<audio v-if="item.choiceType=='4'" :src="item.contentUrl"></audio>
		</checkbox-group>

		<!-- <view @click="change(item.choiceId)">
				<view :class="[item.isChose=='0'?'unselected':'selected']">
					<text>{{item.choiceId}}、</text>
					<text class="content-opt">{{item.choiceDesc}}</text>
				</view>
				
			</view> -->
		<!-- <choice-item v-for="item in choices" :item="item" :key="item.choiceId" @change="change"></choice-item> -->
	</view>

</template>

<script>
	import {
		isEmpty
	} from '@/utils/index';
	import AutoImg from './AutoImg';
	import ChoiceItem from './ChoiceItem';
	export default {
		components: {
			ChoiceItem,
			AutoImg
		},
		props: {
			choices: {
				type: Array,
				default () {
					return [];
				}
			},
			selectedChoice: null,
		},
		methods: {
			change(choiceId) {
				console.log(this.selectedChoice)
				const empty = isEmpty(this.selectedChoice);
				let choiceTmp = empty ? [] : this.selectedChoice;
				if (empty) {
					choiceTmp.push(choiceId);
				} else {
					const index = this.selectedChoice.indexOf(choiceId)
					if (index > -1) {
						choiceTmp.splice(index, 1);
					} else {
						choiceTmp.push(choiceId);
					}
				}
				console.log(choiceTmp.sort())
				this.$emit('change', choiceTmp.sort())
			}
		}
	}
</script>

<style lang="scss" scoped>
	.unselected {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		margin: 20upx 0;
		padding: 30upx 20upx;
		font-size: 26upx;
		background: #f4f6f8;
		border-radius: 8rpx;
		color: #000;
	}

	.selected {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		margin: 20upx 0;
		padding: 30upx 20upx;
		font-size: 26upx;
		background: #5ea1f8;
		color: #fff;
		border-radius: 8rpx;
	}
</style>
